<template>
    <div class="rootView">
        <div class="top-nav">
            <div class="brand flex-align">
                <div class="tit1">服务商品牌：</div>
                <div class="brand-list flex pointer">
                    <div class="item flex-align" v-for="(item, index) in brandList" :key="index"
                        @click="goServiceInfo(item)">
                        <img :src="item.logo" alt="" />
                        <div class="name fz12 ellipsis1">{{ item.name }}</div>
                    </div>
                </div>
            </div>
            <!-- <div class="category flex-align pointer">
                <div class="tit2">服务商类别：</div>
                <div class="cate" v-for="(item, index) in cateList" :key="index" @click="selectServType(item, index)"
                    :class="{
                        cff6: servTypeCurrent == index,
                    }">
                    {{ item.name }}
                </div>
            </div> -->
            <div class="address flex-align">
                <div class="tit2">服务商所在地：</div>
                <div class="city pointer" v-for="(item, index) in hotCityList" :key="index" :class="{
                    cff6: citySelect == item.id,
                }" @click="cityClick(item)">
                    {{ item.name }}
                </div>
                <!-- <div class="more">更多 <i class="el-icon-arrow-down"></i></div> -->
                <el-popover placement="bottom" width="244" trigger="click">
                    <el-cascader ref="citySelect" class="cate-tab-select" v-model="form.address" :options="region"
                        :props="{
                            value: 'id',
                            label: 'name',
                            children: 'children',
                        }" clearable @change="cityChange"></el-cascader>
                    <div slot="reference" class="cateTab-type-item" :class="{
                        'cateTab-type-item-active': selectAddress != '更多',
                    }">
                        {{ selectAddress }}
                        <i class="el-icon-arrow-down"></i>
                    </div>
                </el-popover>
            </div>
        </div>

        <!-- <div class="shaixuan">
            <div class="range">
                <span style="padding-right: 16px;">价格:</span>
                <el-input-number v-model="num" :controls="false" :min="0"></el-input-number>
                <span style="padding: 0 4px;">-</span>
                <el-input-number v-model="num" :controls="false" :min="0"></el-input-number>
                <el-button type="primary" class="button">确定</el-button>
            </div>
            <div></div>
        </div> -->

        <template v-if="resultList.length > 0">
            <div class="result-list flex flex-wrap">
                <div class="result-item pointer ellipsis1" v-for="(item, index) in resultList" :key="index">
                    <img @click="goGoodsInfo(item)" class="img1" :src="item.pic.split(',')[0]" alt="" />
                    <div class="price-info flex-between">
                        <div class="fz14 cff4">
                            {{
                                item.price == "0.00"
                                    ? "面议"
                                    : "￥" + item.price
                            }}
                        </div>
                        <div class="fz12 c999">销量{{ item.sale }}</div>
                    </div>
                    <div class="title">{{ item.name }}</div>
                    <div class="gs-info flex-align" v-if="item.serviceinfo">
                        <img class="img2" :src="item.serviceinfo.logo" alt="" />
                        <span class="fz12 c999">{{
                            item.serviceinfo.name
                            }}</span>
                    </div>
                    <div class="buttons flex-between fz12 pointer">
                        <div></div>
                        <!-- <div class="btn-zx flex-center-align">
                            <i class="el-icon-chat-dot-square mr6"></i>
                            <span @click="openKefu(item)">咨询TA</span>
                        </div> -->
                        <div class="btn-gm flex-center-align pointer">
                            <i class="el-icon-shopping-cart-2 mr6"></i>
                            <span @click="goBuy(item)">去购买</span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="text-align: center; padding-top: 30px;position: relative;z-index: 10;">
                <el-pagination background layout="prev, pager, next" :total="allcount" :page-size="form.pagesize"
                    :current-page.sync="page" @current-change="changePage">
                </el-pagination>
            </div>
        </template>
        <template v-else>
            <div class="null-page">
                <el-empty description="没有相关内容，您可以自行发布需求"></el-empty>
                <div class="fb-btn flex-center-align pointer" @click="fabu">
                    发布需求
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import {
    getSearchShopList,
    getRecommendServices,
    buyShop,
} from "@/assets/api/service";

import region from "@/assets/json/region-just-city.json";

export default {
    name: "servicesearch",
    head() {
        return {
            title: "搜索-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,小竹企服,搜索",
                },
            ],
        };
    },
    layout: "serverHome",
    data() {
        return {
            num: 0,
            isOnline: false,
            selectCurrent: 0,
            selectItem: [
                { name: "综合", sort: 0 },
                { name: "销量", sort: 1 },
            ],
            brandList: [],
            cateList: [
                { name: "全部", type: "" },
                { name: "官方服务商", type: 1 },
                // { name: "金牌服务商", type: 2 },
                // { name: "银牌服务商", type: 3 },
                // { name: "铜牌服务商", type: 4 },
                { name: "普通服务商", type: 5 },
            ],
            servTypeCurrent: 0,
            region: [],
            selectAddress: "更多",
            citySelect: null,
            sort: 0,
            hotCityList: [
                {
                    name: "全国",
                    id: null,
                },
                {
                    name: "北京",
                    id: "110100",
                },
                {
                    name: "上海",
                    id: "310100",
                },
                {
                    name: "广州",
                    id: "440100",
                },
                {
                    name: "深圳",
                    id: "440300",
                },
                {
                    name: "重庆",
                    id: "500100",
                },
                {
                    name: "成都",
                    id: "510100",
                },
                {
                    name: "杭州",
                    id: "330100",
                },
                {
                    name: "天津",
                    id: "120100",
                },
                {
                    name: "苏州",
                    id: "320500",
                },
            ],
            resultList: [],
            serviceInfo: {},
            page: 1,
            form: {
                keyword: "",
                type: "",
                service_id: "",
                address: "",
                is_online: "",
                sort: "",
                page: 1,
                pagesize: 12,
            },
            allcount: 0,
        };
    },
    watch: {
        '$route.query.keyword'(n, o) {
            if (n) {
                this.form.keyword = n
                this.resultList = []
                this.getSearchShopList();
            }
        }
    },
    mounted() {
        this.$loads.show();
        this.form.keyword = this.$route.query.keyword;
        this.init();
        this.getSearchShopList();
        this.getRecommendServices();
    },
    methods: {
        //城市数据处理
        init() {
            let regionList = region;
            for (let items of regionList) {
                for (let item of items.children) {
                    delete item.children;
                }
            }
            this.region = regionList;
        },
        //获取搜索列表
        async getSearchShopList() {
            if (this.isOnline) {
                this.form.is_online = 1;
            }
            var params = {
                keyword: this.form.keyword,
                type: this.form.type,
                city_code: this.form.address,
                is_online: this.form.is_online,
                sort: this.form.sort,
                page: this.form.page,
                pagesize: this.form.pagesize,
            };
            if (this.$route.query.cate) {
                params.cate = this.$route.query.cate;
            }
            let res = await getSearchShopList(params);
            this.$loads.hidden();
            if (res.code == 1) {
                this.resultList = res.data;
                if (this.resultList.length > 0) {
                    this.allcount = res.data[0].allcount;
                } else {
                    this.allcount = 0;
                }
            }
        },

        //获取推荐服务商
        async getRecommendServices() {
            this.$loads.hidden();
            let res = await getRecommendServices();
            if (res.code == 1) {
                this.brandList = res.data.slice(0, 8);
            }
        },
        //选择服务商类型
        selectServType(item, index) {
            this.servTypeCurrent = index;
            this.form.type = item.type;
            this.getSearchShopList();
        },
        //销量选择
        selectFun(item, index) {
            this.selectCurrent = index;
            this.form.sort = item.sort;
            this.getSearchShopList();
        },
        //在线选择
        changeSwitch(item) {
            if (item) {
                this.form.is_online = 1;
            } else {
                this.form.is_online = 0;
            }
            this.getSearchShopList();
        },
        //下拉选择城市
        cityChange(item) {
            console.log("查看地区选择item", item);
            if (
                this.selectAddress ==
                this.$refs.citySelect.getCheckedNodes()[0].label
            )
                return;
            this.citySelect = "";
            this.selectAddress =
                this.$refs.citySelect.getCheckedNodes()[0].label;

            this.form.address = item[1];
            this.getSearchShopList();
        },
        //城市选择
        cityClick(item) {
            if (this.citySelect == item.id) return;
            this.selectAddress = "更多";
            this.citySelect = item.id;
            this.form.address = item.id;
            this.getSearchShopList();
        },

        //去服务商详情
        goServiceInfo(item) {
            this.$router.push({
                path: "/service/servicedetail",
                query: { id: item.id },
            });
        },
        //去商品详情
        goGoodsInfo(item) {
            this.$router.push({
                path: "/service/serviceshopsdetail",
                query: { id: item.id },
            });
        },

        //发布需求
        fabu() {
            this.$router.push({
                path: "/service/postdemand",
            });
        },

        async goBuy(item) {
            let res = await buyShop({ shop_id: item.id });
            if (res.code == 1) {
                this.$router.push({
                    path: "/service/shoporder",
                    query: { orderNo: res.data },
                });
            }
        },

        // 分页
        changePage(page) {
            this.form.page = page;
            this.getSearchShopList();
        },
        // 打开客服
        openKefu(item) {
            const token = window.localStorage.getItem("token");
            if (!token) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            localStorage.setItem("to_zim_userid", item.serviceinfo.user_id);
            this.$router.push({
                path: "/service/servicechat",
            });
        },


    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.rootView {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding-bottom: 30px;
}

.top-nav {
    margin-top: 75px;
    margin-bottom: 20px;
    padding: 40px 30px;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    z-index: 10;

    .brand {
        .tit1 {
            font-size: 14px;
            width: 91px;
        }

        .brand-list {
            max-width: 1035px;

            .item {
                margin-right: 12px;
                padding: 0 5px;
                width: 123px;
                height: 42px;
                border: 1px solid #cdcdcd;

                .name {
                    width: 67px;
                    height: 17px;
                }

                img {
                    margin-right: 10px;
                    width: 34px;
                    height: 34px;
                    border-radius: 34px;
                }

                &:hover {
                    border: 1px solid #ff6900;
                }
            }
        }
    }

    .category {
        margin: 30px 0;
        font-size: 14px;
        font-weight: 400;

        .tit2 {
            margin-right: 15px;
            width: 91px;
        }

        .cate {
            margin-right: 35px;
        }
    }

    .address {
        font-size: 14px;

        .tit2 {
            width: 106px;
        }

        .city {
            margin-right: 35px;
        }

        .city-active {
            margin-right: 35px;
            color: #ff5b5b;
        }
    }
}

.cateTab-type-item {
    font-size: 14px;
    color: #333333;
    text-align: center;
    margin-right: 28px;
    cursor: pointer;
    height: 38px;
    line-height: 38px;
}

.cateTab-type-item-active {
    // background: #eaf4ff;
    color: #ff5b5b;
}

.shaixuan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
    height: 42px;
    background: #FFFFFF;
    border-radius: 10px;
    position: relative;
    z-index: 10;
    margin: 0 auto 20px;
    padding: 0 20px;

    .range {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #020C17;

        &::v-deep .el-input__inner,
        .el-input-number {
            width: 75px;
            height: 25px;
            line-height: 25px;
            text-align: left;
        }

        &::v-deep .el-input__inner {
            padding-left: 5px;
            padding-right: 5px;
        }


        .button {
            width: 54px;
            height: 25px;
            padding: 0;
            margin-left: 20px;
        }
    }
}

.result-list {
    width: 100%;
    position: relative;
    z-index: 10;

    .result-item {
        margin-bottom: 30px;
        padding: 10px;
        width: 285px;
        height: 427px;
        background: #ffffff;
        border-radius: 10px;

        .img1 {
            width: 265px;
            height: 265px;
        }

        .price-info {
            margin: 7px 6px;
        }

        .title {
            margin-left: 8px;
            font-weight: 500;
            font-size: 16px;
            width: 100%;
            height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .gs-info {
            margin: 15px 0 10px 7px;
            align-items: flex-start;
            height: 30px;

            .img2 {
                margin-right: 5px;
                width: 16px;
                height: 16px;
                border-radius: 50%;
            }
        }

        .buttons {
            margin-left: 7px;

            .btn-zx {
                margin-right: 15px;
                width: 86px;
                height: 26px;
                background: #fff;
                border-radius: 2px 2px 2px 2px;
                border: 1px solid #ff6900;
                color: #ff6900;
            }

            .btn-gm {
                width: 86px;
                height: 26px;
                background-color: #1C87F3;
                border-radius: 2px 2px 2px 2px;
                color: #fff;

                &:hover {
                    opacity: 0.85;
                }
            }
        }

        &:not(:nth-child(4n)) {
            margin-right: 20px;
        }
    }
}

.null-page {
    width: 100%;
    min-height: 814px;
    background-color: #fff;
    position: relative;
    z-index: 10;

    .fb-btn {
        margin: 0 auto;
        margin-top: 45px;
        width: 140px;
        height: 42px;
        border-radius: 2px 2px 2px 2px;
        color: #fff;
        cursor: pointer;
        background-color: #ff8f1f;
    }
}

.search ::v-deep .logo {
    width: 0 !important;
}
</style>